"use client"

import { useState, useRef } from "react"
import { View, Text, StyleSheet, TouchableOpacity, Animated, Platform, Dimensions } from "react-native"
import { SafeAreaView } from "react-native-safe-area-context"
import { LinearGradient } from "expo-linear-gradient"
import {
    ArrowLeft,
    List,
    BookmarkIcon,
    ChevronRight,
    Check,
    ChevronLeft,
    Bookmark,
    Lightbulb,
} from "lucide-react-native"
import { useRouter } from "expo-router"
import { theme } from "../../constants/theme"
import { WordListModal } from "../../components/practices/WordListModal"
import { SplitSpellCard } from "../../components/practices/SplitSpellCard"
import { NaturalReadingCard } from "../../components/practices/NaturalReadingCard"
import { LetterSpellCard } from "../../components/practices/LetterSpellCard"
import { ProgressBar } from "../../components/practices/ProgressBar"
import { CollectionModal } from "../../components/learning/CollectionModal"
import message from "@/components/ui/message"

// 获取屏幕宽度
const { width } = Dimensions.get("window")

// 模拟的练习数据
const PRACTICE_DATA = [
    {
        id: "1",
        word: "funny",
        phonetic: "/ˈfʌni/",
        type: "adj",
        meaning: "滑稽的；好笑的；有趣的",
        parts: ["fu", "nny"],
    },
    {
        id: "2",
        word: "happy",
        phonetic: "/ˈhæpi/",
        type: "adj",
        meaning: "快乐的；幸福的；高兴的",
        parts: ["ha", "ppy"],
    },
    {
        id: "3",
        word: "beautiful",
        phonetic: "/ˈbjuːtɪfʊl/",
        type: "adj",
        meaning: "美丽的；漂亮的",
        parts: ["beau", "ti", "ful"],
    },
    // ... 更多单词
]

// 单词状态
type WordStatus = "new" | "learning" | "mastered"

export default function SpellPracticeScreen() {
    const router = useRouter()
    const [currentWordIndex, setCurrentWordIndex] = useState(0)
    const [currentStep, setCurrentStep] = useState(0)
    const [listModalVisible, setListModalVisible] = useState(false)
    const [wordStatus, setWordStatus] = useState<WordStatus>("new")
    const [isFavorite, setIsFavorite] = useState(false)
    const [collectionModalVisible, setCollectionModalVisible] = useState(false)

    // 拆分拼写状态
    const [selectedParts, setSelectedParts] = useState<string[]>([])
    const [showHint, setShowHint] = useState(false)
    const slotsOpacity = useRef(new Animated.Value(1)).current

    // 自然拼读状态
    const [hintState, setHintState] = useState(0)
    const contentOpacity = useRef(new Animated.Value(1)).current
    const wordOpacity = useRef(new Animated.Value(0)).current

    // 字母拼写状态
    const [userInput, setUserInput] = useState("")

    // 反馈状态
    const [feedback, setFeedback] = useState<{ type: "success" | "error" | null; message: string }>({
        type: null,
        message: "",
    })

    // 动画值
    const slideAnim = useRef(new Animated.Value(0)).current
    const hintButtonScale = useRef(new Animated.Value(1)).current

    // 当前单词
    const currentWord = PRACTICE_DATA[currentWordIndex]

    // 步骤标题
    const STEPS = [
        { id: "split", label: "拆分拼写" },
        { id: "natural", label: "自然拼读" },
        { id: "letter", label: "字母拼写" },
    ]

    // 返回上一页
    const handleBack = () => {
        router.back()
    }

    // 切换收藏状态
    const toggleFavorite = () => {
        if (isFavorite) {
            // 如果已收藏，则取消收藏
            setIsFavorite(false)
        } else {
            // 如果未收藏，则显示收藏弹窗
            setCollectionModalVisible(true)
        }
    }

    // 下一个单词
    const handleNext = () => {
        if (currentWordIndex < PRACTICE_DATA.length - 1) {
            // 重置所有状态
            setCurrentWordIndex(currentWordIndex + 1)
            setCurrentStep(0)
            slideAnim.setValue(0)
            setSelectedParts([])
            setShowHint(false)
            setHintState(0)
            setUserInput("")
            setFeedback({ type: null, message: "" })
        }
    }

    // 处理步骤变化
    const handleStepChange = (index: number) => {
        // 添加淡出动画
        Animated.timing(contentOpacity, {
            toValue: 0,
            duration: 200,
            useNativeDriver: true,
        }).start(() => {
            // 滑动到新步骤
            Animated.timing(slideAnim, {
                toValue: -index * width,
                duration: 300,
                useNativeDriver: true,
            }).start()

            setCurrentStep(index)

            // 添加淡入动画
            Animated.timing(contentOpacity, {
                toValue: 1,
                duration: 200,
                useNativeDriver: true,
            }).start()
        })
    }

    // 上一步
    const handlePrevStep = () => {
        if (currentStep > 0) {
            handleStepChange(currentStep - 1)
        }
    }

    // 下一步
    const handleNextStep = () => {
        if (currentStep < STEPS.length - 1) {
            handleStepChange(currentStep + 1)
        }
    }

    // 显示提示 - 统一的提示按钮逻辑
    const showHintAnimation = () => {
        // 缩放提示按钮
        Animated.sequence([
            Animated.timing(hintButtonScale, {
                toValue: 0.8,
                duration: 100,
                useNativeDriver: true,
            }),
            Animated.timing(hintButtonScale, {
                toValue: 1,
                duration: 100,
                useNativeDriver: true,
            }),
        ]).start()

        // 根据当前步骤执行不同的提示逻辑
        if (currentStep === 0) {
            // 拆分拼写提示
            setShowHint(true)

            // 淡入淡出动画
            Animated.sequence([
                Animated.timing(slotsOpacity, {
                    toValue: 0,
                    duration: 200,
                    useNativeDriver: true,
                }),
                Animated.timing(slotsOpacity, {
                    toValue: 1,
                    duration: 200,
                    useNativeDriver: true,
                }),
            ]).start()

            // 2秒后隐藏提示
            setTimeout(() => {
                setShowHint(false)
            }, 2000)
        } else if (currentStep === 1) {
            // 自然拼读提示
            setHintState((prev) => (prev + 1) % 3)

            // 淡入淡出动画
            Animated.sequence([
                Animated.timing(contentOpacity, {
                    toValue: 0,
                    duration: 200,
                    useNativeDriver: true,
                }),
                Animated.timing(contentOpacity, {
                    toValue: 1,
                    duration: 200,
                    useNativeDriver: true,
                }),
            ]).start()

            // 如果显示单词，3秒后隐藏
            if (hintState === 1) {
                // 显示单词动画
                Animated.timing(wordOpacity, {
                    toValue: 1,
                    duration: 300,
                    useNativeDriver: true,
                }).start()

                setTimeout(() => {
                    // 隐藏单词动画
                    Animated.timing(wordOpacity, {
                        toValue: 0,
                        duration: 300,
                        useNativeDriver: true,
                    }).start(() => {
                        setHintState(0)
                    })
                }, 3000)
            }
        } else if (currentStep === 2) {
            // 字母拼写提示
            setShowHint(true)

            // 2秒后隐藏提示
            setTimeout(() => {
                setShowHint(false)
            }, 2000)
        }
    }

    // 拆分拼写 - 选择单词部分
    const handlePartSelect = (part: string) => {
        // 检查是否已经选择了这个部分
        const partIndex = selectedParts.indexOf(part)

        if (partIndex !== -1) {
            // 如果已经选择了，则移除它
            const newSelectedParts = [...selectedParts]
            newSelectedParts.splice(partIndex, 1)
            setSelectedParts(newSelectedParts)
            return
        }

        if (selectedParts.length < currentWord.parts.length) {
            const newSelectedParts = [...selectedParts, part]
            setSelectedParts(newSelectedParts)

            // 检查是否已经选择了所有部分，如果是，则验证答案
            if (newSelectedParts.length === currentWord.parts.length) {
                // 检查答案是否正确
                const correct = newSelectedParts.every((part, index) => part === currentWord.parts[index])

                if (correct) {
                    // 如果正确，显示成功反馈
                    setFeedback({ type: "success", message: "拼写正确！" })

                    // 延迟后自动进入下一步
                    setTimeout(() => {
                        setFeedback({ type: null, message: "" })
                        if (currentStep < 2) {
                            handleStepChange(currentStep + 1)
                        }
                    }, 1200)
                } else {
                    // 如果错误，显示错误反馈
                    setFeedback({ type: "error", message: "拼写错误，请重试" })

                    // 延迟后清空选择
                    setTimeout(() => {
                        setSelectedParts([])
                        setFeedback({ type: null, message: "" })
                    }, 1200)
                }
            }
        }
    }

    // 拆分拼写 - 移除单词部分
    const handlePartRemove = (index: number) => {
        const newSelectedParts = [...selectedParts]
        newSelectedParts.splice(index, 1)
        setSelectedParts(newSelectedParts)
    }

    // 字母拼写 - 检查答案
    const checkLetterSpell = (isCorrect: boolean) => {
        if (isCorrect) {
            // 如果正确，延迟后自动进入下一步或下一个单词
            setTimeout(() => {
                if (currentStep < 2) {
                    handleStepChange(currentStep + 1)
                } else {
                    handleNext()
                }
            }, 1200)
        }
    }

    // 准备单词列表数据
    const wordListData = PRACTICE_DATA.map((item) => ({
        id: item.id,
        word: item.word,
        phonetic: item.phonetic,
        meaning: item.meaning,
    }))

    return (
        <View style={styles.container}>
            <LinearGradient
                colors={theme.colors.neutral.backgroundGradient}
                start={{ x: 0, y: 0 }}
                end={{ x: 0, y: 1 }}
                style={styles.gradientBackground}
            >
                <SafeAreaView style={styles.safeArea} edges={["top"]}>
                    {/* 头部 */}
                    <View style={styles.header}>
                        <TouchableOpacity onPress={handleBack} style={styles.headerButton}>
                            <ArrowLeft size={24} color={theme.colors.neutral.black} />
                        </TouchableOpacity>
                        <Text style={styles.headerTitle}>
                            拼写训练({currentWordIndex + 1}/{PRACTICE_DATA.length})
                        </Text>
                        <TouchableOpacity style={styles.headerButton} onPress={() => setListModalVisible(true)}>
                            <List size={24} color={theme.colors.neutral.black} />
                        </TouchableOpacity>
                    </View>

                    {/* 进度条 */}
                    <ProgressBar current={currentWordIndex + 1} total={PRACTICE_DATA.length} showText={true} textPosition="top" />

                    {/* 步骤指示器 */}
                    <View style={styles.stepsContainer}>
                        {STEPS.map((step, index) => (
                            <View key={step.id} style={styles.stepItem}>
                                <TouchableOpacity onPress={() => handleStepChange(index)} style={styles.stepTouchable}>
                                    {index < currentStep ? (
                                        <View style={styles.stepIconCompleted}>
                                            <Check size={16} color="#fff" />
                                        </View>
                                    ) : index === currentStep ? (
                                        <View style={styles.stepIconCurrent}>
                                            <Text style={styles.stepNumberText}>{index + 1}</Text>
                                        </View>
                                    ) : (
                                        <View style={styles.stepIconUpcoming}>
                                            <Text style={styles.stepNumberTextUpcoming}>{index + 1}</Text>
                                        </View>
                                    )}
                                </TouchableOpacity>

                                <Text style={[styles.stepLabel, index === currentStep && styles.stepLabelActive]}>{step.label}</Text>

                                {index < STEPS.length - 1 && <View style={styles.stepConnector} />}
                            </View>
                        ))}
                    </View>

                    {/* 内容区域 */}
                    <View style={styles.contentWrapper}>
                        {/* 左侧导航按钮 */}
                        {currentStep > 0 && (
                            <TouchableOpacity style={styles.navButtonLeft} onPress={handlePrevStep}>
                                <ChevronLeft size={24} color={theme.colors.primary.default} />
                            </TouchableOpacity>
                        )}

                        {/* 右侧导航按钮 */}
                        {currentStep < STEPS.length - 1 && (
                            <TouchableOpacity style={styles.navButtonRight} onPress={handleNextStep}>
                                <ChevronRight size={24} color={theme.colors.primary.default} />
                            </TouchableOpacity>
                        )}

                        <Animated.View
                            style={[
                                styles.slidingContainer,
                                {
                                    transform: [{ translateX: slideAnim }],
                                    opacity: contentOpacity,
                                },
                            ]}
                        >
                            {/* 拆分拼写 */}
                            <View style={styles.card}>
                                <SplitSpellCard
                                    parts={currentWord.parts}
                                    phonetic={currentWord.phonetic}
                                    type={currentWord.type}
                                    meaning={currentWord.meaning}
                                    showHint={showHint}
                                    slotsOpacity={slotsOpacity}
                                    selectedParts={selectedParts}
                                    onPartSelect={handlePartSelect}
                                    onPartRemove={handlePartRemove}
                                    feedback={feedback}
                                />
                            </View>

                            {/* 自然拼读 */}
                            <View style={styles.card}>
                                <NaturalReadingCard
                                    word={currentWord.word}
                                    phonetic={currentWord.phonetic}
                                    type={currentWord.type}
                                    meaning={currentWord.meaning}
                                    parts={currentWord.parts}
                                    showPhonetic={hintState >= 1}
                                    showWord={hintState === 2}
                                    contentOpacity={contentOpacity}
                                    wordOpacity={wordOpacity}
                                    onPartSelect={handlePartSelect}
                                    onPartRemove={handlePartRemove}
                                    selectedParts={selectedParts}
                                    feedback={feedback}
                                />
                            </View>

                            {/* 字母拼写 */}
                            <View style={styles.card}>
                                <LetterSpellCard
                                    word={currentWord.word}
                                    phonetic={currentWord.phonetic}
                                    meaning={currentWord.meaning}
                                    showHint={showHint}
                                    onPlaySound={() => console.log("播放音频")}
                                    onCheckAnswer={checkLetterSpell}
                                    onNext={handleNext}
                                />
                            </View>
                        </Animated.View>

                        {/* 统一的提示按钮 - 右下角 */}
                        <Animated.View
                            style={[styles.hintButtonContainer, { transform: [{ scale: hintButtonScale }] }]}
                            pointerEvents="box-none"
                        >
                            <TouchableOpacity style={styles.hintButton} onPress={showHintAnimation} activeOpacity={0.7}>
                                <Lightbulb size={32} color={theme.colors.neutral.white} />
                            </TouchableOpacity>
                        </Animated.View>
                    </View>
                </SafeAreaView>

                {/* 底部状态栏 */}
                <View style={styles.bottomBar}>
                    {/* 单词状态选择 */}
                    <View style={styles.statusButtons}>
                        <TouchableOpacity
                            style={[styles.statusButton, wordStatus === "new" && styles.statusButtonActive]}
                            onPress={() => setWordStatus("new")}
                        >
                            <Text style={[styles.statusButtonText, wordStatus === "new" && styles.statusButtonTextActive]}>生词</Text>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={[styles.statusButton, wordStatus === "learning" && styles.statusButtonActive]}
                            onPress={() => setWordStatus("learning")}
                        >
                            <Text style={[styles.statusButtonText, wordStatus === "learning" && styles.statusButtonTextActive]}>
                                学习中
                            </Text>
                        </TouchableOpacity>

                        <TouchableOpacity
                            style={[styles.statusButton, wordStatus === "mastered" && styles.statusButtonActive]}
                            onPress={() => setWordStatus("mastered")}
                        >
                            <Text style={[styles.statusButtonText, wordStatus === "mastered" && styles.statusButtonTextActive]}>
                                掌握
                            </Text>
                        </TouchableOpacity>
                    </View>

                    {/* 收藏按钮 */}
                    <TouchableOpacity
                        style={[styles.favoriteButton, isFavorite && styles.favoriteButtonActive]}
                        onPress={toggleFavorite}
                    >
                        <BookmarkIcon
                            size={20}
                            color={isFavorite ? theme.colors.neutral.white : "#8B5CF6"}
                            fill={isFavorite ? "#8B5CF6" : "none"}
                        />
                    </TouchableOpacity>


                    {/* 下一词按钮 */}
                    <TouchableOpacity style={styles.nextButton} onPress={handleNext}>
                        <LinearGradient
                            colors={theme.colors.primary.gradient}
                            start={{ x: 0, y: 0 }}
                            end={{ x: 1, y: 0 }}
                            style={styles.nextButtonGradient}
                        >
                            <Text style={styles.nextButtonText}>下一词</Text>
                            <ChevronRight size={20} color={theme.colors.neutral.white} />
                        </LinearGradient>
                    </TouchableOpacity>
                </View>

                {/* 单词列表弹窗 */}
                <WordListModal
                    visible={listModalVisible}
                    data={wordListData}
                    currentIndex={currentWordIndex}
                    onClose={() => setListModalVisible(false)}
                    onSelectWord={(index) => {
                        setCurrentWordIndex(index)
                        setCurrentStep(0)
                        slideAnim.setValue(0)
                        setSelectedParts([])
                        setShowHint(false)
                        setHintState(0)
                        setUserInput("")
                        setFeedback({ type: null, message: "" })
                        setListModalVisible(false)
                    }}
                    title="单词列表"
                />
                {/* 收藏弹窗 */}
                <CollectionModal
                    visible={collectionModalVisible}
                    onClose={() => setCollectionModalVisible(false)}
                    onConfirm={(selectedUnitId, bookId) => {
                        setIsFavorite(true)
                        setCollectionModalVisible(false)
                        // 这里可以添加将单词添加到收藏夹的逻辑
                        console.log("添加到收藏夹", selectedUnitId, bookId)
                    }}
                />
            </LinearGradient>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: theme.colors.neutral.background,
    },
    gradientBackground: {
        flex: 1,
        backgroundColor: "#F5F7FF",
    },
    safeArea: {
        flex: 1,
    },
    header: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        paddingHorizontal: theme.spacing.lg,
        paddingVertical: theme.spacing.md,
    },
    headerButton: {
        width: 40,
        height: 40,
        borderRadius: 20,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "rgba(255, 255, 255, 0.5)",
    },
    headerTitle: {
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
        textAlign: "center",
    },
    stepsContainer: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center",
        paddingHorizontal: theme.spacing.lg,
        paddingVertical: theme.spacing.md,
        position: "relative",
    },
    stepItem: {
        flex: 1,
        alignItems: "center",
        position: "relative",
    },
    stepTouchable: {
        alignItems: "center",
        justifyContent: "center",
        marginBottom: 4,
    },
    stepIconCompleted: {
        width: 28,
        height: 28,
        borderRadius: 14,
        backgroundColor: theme.colors.secondary.green.default,
        alignItems: "center",
        justifyContent: "center",
    },
    stepIconCurrent: {
        width: 28,
        height: 28,
        borderRadius: 14,
        backgroundColor: theme.colors.primary.default,
        alignItems: "center",
        justifyContent: "center",
    },
    stepIconUpcoming: {
        width: 28,
        height: 28,
        borderRadius: 14,
        backgroundColor: theme.colors.neutral.lightGray,
        alignItems: "center",
        justifyContent: "center",
    },
    stepNumberText: {
        fontSize: theme.fontSize.sm,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.white,
    },
    stepNumberTextUpcoming: {
        fontSize: theme.fontSize.sm,
        fontWeight: theme.fontWeight.medium,
        color: theme.colors.neutral.darkGray,
    },
    stepConnector: {
        position: "absolute",
        top: 14,
        right: 0,
        width: "50%",
        height: 1,
        backgroundColor: theme.colors.neutral.lightGray,
        zIndex: -1,
    },
    stepLabel: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.gray,
        marginTop: 2,
    },
    stepLabelActive: {
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.semiBold,
    },
    contentWrapper: {
        flex: 1,
        position: "relative",
        paddingTop: theme.spacing.md,
    },
    slidingContainer: {
        flexDirection: "row",
        width: width * 3,
        flex: 1,
        marginBottom: 30,
    },
    card: {
        width: width - theme.spacing.lg * 2,
        flex: 1,
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.extraLarge,
        padding: theme.spacing.xl,
        marginHorizontal: theme.spacing.lg,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 4 },
                shadowOpacity: 0.3,
                shadowRadius: 8,
            },
            android: {
                elevation: 4,
            },
        }),
    },
    navButtonLeft: {
        position: "absolute",
        left: 0,
        top: "50%",
        width: 44,
        height: 120,
        borderTopRightRadius: 22,
        borderBottomRightRadius: 22,
        backgroundColor: "rgba(255, 255, 255, 0.9)",
        alignItems: "center",
        justifyContent: "center",
        zIndex: 10,
        transform: [{ translateY: -60 }],
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 2, height: 0 },
                shadowOpacity: 0.5,
                shadowRadius: 4,
            },
            android: {
                elevation: 4,
            },
        }),
    },
    navButtonRight: {
        position: "absolute",
        right: 0,
        top: "50%",
        width: 44,
        height: 120,
        borderTopLeftRadius: 22,
        borderBottomLeftRadius: 22,
        backgroundColor: "rgba(255, 255, 255, 0.9)",
        alignItems: "center",
        justifyContent: "center",
        zIndex: 10,
        transform: [{ translateY: -60 }],
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: -2, height: 0 },
                shadowOpacity: 0.5,
                shadowRadius: 4,
            },
            android: {
                elevation: 4,
            },
        }),
    },
    hintButtonContainer: {
        position: "absolute",
        right: theme.spacing.lg,
        bottom: theme.spacing.xxxl,
        zIndex: 100,
    },
    hintButton: {
        width: 50,
        height: 50,
        borderRadius: 32,
        backgroundColor: theme.colors.primary.default,
        alignItems: "center",
        justifyContent: "center",
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.3)",
                shadowOffset: { width: 0, height: 6 },
                shadowOpacity: 0.7,
                shadowRadius: 8,
            },
            android: {
                elevation: 10,
            },
        }),
    },
    bottomBar: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        paddingHorizontal: theme.spacing.lg,
        paddingTop: theme.spacing.lg,
        paddingBottom: Platform.OS === "ios" ? 34 : theme.spacing.lg,
        backgroundColor: theme.colors.neutral.white,
        borderTopWidth: 1,
        borderTopColor: "rgba(0, 0, 0, 0.05)",
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.05)",
                shadowOffset: { width: 0, height: -2 },
                shadowOpacity: 1,
                shadowRadius: 4,
            },
            android: {
                elevation: 8,
            },
        }),
    },
    statusButtons: {
        flexDirection: "row",
        gap: theme.spacing.xs,
    },
    statusButton: {
        paddingHorizontal: theme.spacing.md,
        paddingVertical: theme.spacing.xs,
        borderRadius: theme.borderRadius.medium,
        backgroundColor: theme.colors.neutral.lightGray,
    },
    statusButtonActive: {
        backgroundColor: "rgba(91, 142, 244, 0.1)",
        borderWidth: 1,
        borderColor: theme.colors.primary.default,
    },
    statusButtonText: {
        fontSize: theme.fontSize.xs,
        color: theme.colors.neutral.darkGray,
    },
    statusButtonTextActive: {
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.semiBold,
    },
    favoriteButton: {
        width: 36,
        height: 36,
        borderRadius: 18,
        backgroundColor: "rgba(91, 142, 244, 0.1)",
        alignItems: "center",
        justifyContent: "center",
        marginHorizontal: theme.spacing.md,
    },
    nextButton: {
        flex: 1,
        borderRadius: theme.borderRadius.large,
        overflow: "hidden",
        height: 44,
    },
    nextButtonGradient: {
        flex: 1,
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "center",
        gap: theme.spacing.xs,
    },
    nextButtonText: {
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.white,
    },
    favoriteButtonActive: {
        backgroundColor: "#8B5CF6",
    },
})

